<style scoped>
.price_cart{padding: 0 4px;}
.price_cart .price{text-align: right;font-weight: bold;}
.price_cart .price>.sm{font-size: 0.7em;}
.price_cart .cart .van-icon{width: 1.4em;height: 1.4em;border-radius: 4px;display: flex;justify-content: center;align-items: center;background: var(--color-bg);}
.price_cart .cart .van-icon.primary{background: var(--color-primary);color: var(--color-bg-0);}
.price_cart .cart>span{padding: 0 2px;}
</style>
<template>
  <RequestListCategorySlot :category_list="category_list" category_field="category_id" :category_id="category_id" :url="url" pull_refresh >
    <template #default="{row}">
      <Card v-bind="row" :href="info_href(row)" >
        <template #footer v-if="this.s94_cart">
          <div class="flex price_cart" style="justify-content: space-between;">
            <p class="price"></p>
            <p class="cart flex">
              <van-icon name="minus" v-if="num_map[row.id]" @click.stop="dec_cart(row)" />
              <span v-if="num_map[row.id]"> {{ num_map[row.id] }} </span>
              <van-icon name="plus" class="primary" @click.stop="inc_cart(row)" />
            </p>
          </div>
        </template>
      </Card>
    </template>
  </RequestListCategorySlot>
  <FooterSlot>
    <FooterCart v-show="s94_cart.cart_items.length>0" v-bind="cart_data" @buy="to_buy" ></FooterCart>
  </FooterSlot>
</template>

<script>
import {_get} from "@/vue_plugin/router_auto.js";
import {ajax} from "@/js/api_tool.js";
import {S94Model} from "@/js/S94Model.js";
import FooterSlot from "@/components/slot/FooterSlot.vue";
import FooterCart from "@/components/cart/FooterCart.vue";
import RequestListCategorySlot from "@/components/slot/RequestListCategorySlot.vue";
import Card from "@/components/card/Card.vue";
export default {
  components:{Card, RequestListCategorySlot, FooterCart, FooterSlot},
  props: {
    model: S94Model,
    this_action: Object,
  },
  data(){
    return {
      url: `/home/${this.model.name}/${this.this_action.action}`,
      category_list: [],
      category_id: _get('category_id', ''),
      s94_cart: this.model.cart(),

      num_map: {},
      cart_data: {},
    }
  },
  methods:{
    async get_category_list(){
      let url = `/home/category/list?where[model_name][eq]=${this.model.name}`;
      let res = await ajax(url);
      this.category_list = res.data?.list || [];
    },
    info_href(row){
      let info_action = this.model.canActionListHome(row).find(row=>row.type==='info');
      if (!info_action) return '';
      return `/model_base/info?model_name=${this.model.name}&action=${info_action.action}&id=${row.id}`
    },
    inc_cart(row){
      if (!this.s94_cart) return
      this.s94_cart.add_item({
        link_id: row.id,
        title: row.title,
        head_img: row.head_img,
        price: row.price,
      })
      this.compute_price();
    },
    dec_cart(row){
      if (!this.s94_cart) return
      this.s94_cart.remove_item({
        link_id: row.id,
      })
      this.compute_price();
    },
    compute_price(){
      this.num_map = {}
      this.s94_cart.cart_items.forEach(row=>{
        this.num_map[row.link_id] = row.num;
      })
      if (this.s94_cart.cart_items.length <= 0) {
        return;
      }
      this.s94_cart.compute_price().then(({sum_data})=>{
        sum_data.select = false;
        this.cart_data = sum_data;
      })
    },
    to_buy(){
      this.s94_cart.to_buy();
    }
  },
  computed:{
  },
  mounted(){
    this.get_category_list();
  }
}
</script>